<template>
  <div class="chat-panel">
    <div class="chat-header">
      <div class="chat-title">AI聊天</div>
    </div>
    <div class="message-panel" id="message-panel">
      <div class="message-list">
        <div
          :class="['message-item', item.type == 1 ? 'ai-message' : 'user-message']"
          v-for="(item, index) in messageList"
          :key="index" 
          :id="'item' + index"
        >
          <template v-if="item.type == 0">
            <div class="avatar">我</div>
            <div class="bubble">
              <div class="text">{{ item.content }}</div>
            </div>
          </template>
          <template v-else>
            <div class="avatar">AI</div>
            <div class="bubble">
              <MdPreview
                previewTheme="vuepress"
                :codeFoldable="false"
                editorId="preview"
                :modelValue="item.content.join('')"
              />
              <div class="loading" v-if="item.loading">
                <img src="../assets/loading.gif" />
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="send-panel">
      <div class="model-selector">
        <span class="model-label">模型：</span>
        <el-select clearable placeholder="选择模型" v-model="formData.model" size="small">
          <el-option value="deepseek-r1:1.5b" label="deepseek-r1:1.5b"></el-option>
          <el-option value="4.0Ultra" label="科大讯飞"></el-option>
        </el-select>
      </div>
      <div class="input-area">
        <el-input
          type="textarea"
          :rows="2"
          clearable
          placeholder="请输入你想问的问题"
          v-model="formData.content"
          @keyup="keySend"
        ></el-input>
        <el-button type="primary" @click="sendMessage" :disabled="loading" class="send-btn">
          发送(ctrl+enter)
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";

import {
  ref,
  reactive,
  getCurrentInstance,
  nextTick,
  onMounted,
  onUnmounted,
} from "vue";
const { proxy } = getCurrentInstance();
import { MdPreview, MdCatalog } from "md-editor-v3";
import "md-editor-v3/lib/style.css";

const formData = ref({
  model: "deepseek-r1:1.5b",
});
const messageList = ref([]);
const loading = ref(false);

const keySend = (event) => {
  if (!(event.ctrlKey && event.key === "Enter")) {
    return;
  }
  sendMessage();
};

const sendMessage = () => {
  const message = formData.value.content;
  if (!message) {
    ElMessage({
      type: "warning",
      message: "请输入内容",
      duration: 2000,
    });
    return;
  }
  messageList.value.push({
    type: 0,
    content: message,
  });

  messageList.value.push({
    type: 1,
    content: [],
    loading: true,
  });
  loading.value = true;

  const eventSource = new EventSource(
    `/api/stream?model=${formData.value.model}&message=${encodeURIComponent(message)}&lang=zh`
  );

  formData.value.content = "";
  eventSource.onmessage = (event) => {
    let response = event.data;
    console.log(response);
    if (response == "end") {
      close();
      return;
    }
    response = JSON.parse(response).content;
    messageList.value[messageList.value.length - 1].content.push(response);
    //滚动到底部
    nextTick(() => {
      const content = document.getElementById("message-panel");
      content.scrollTop = content.scrollHeight;
    });
  };

  eventSource.onerror = (error) => {
    close();
  };

  const close = () => {
    eventSource.close();
    messageList.value[messageList.value.length - 1].loading = false;
    loading.value = false;
  };
};
</script>

<style lang="scss" scoped>
.chat-panel {
  background: #f5f5f5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .chat-header {
    padding: 10px 0;
    flex-shrink: 0;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
    
    .chat-title {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }
  
  .message-panel {
    flex: 1;
    overflow-y: auto;
    padding: 10px 15px;
    
    .message-list {
      width: 100%;
      
      .message-item {
        margin: 16px 0;
        display: flex;
        align-items: flex-start;
      }
      
      .user-message {
        flex-direction: row-reverse;
        
        .avatar {
          width: 36px;
          height: 36px;
          line-height: 36px;
          border-radius: 50%;
          background: #2b5ff5;
          color: #fff;
          text-align: center;
          font-size: 14px;
          flex-shrink: 0;
          margin-left: 12px;
        }
        
        .bubble {
          max-width: 70%;
          background: #2b5ff5;
          border-radius: 18px 4px 18px 18px;
          padding: 10px 14px;
          color: #fff;
          word-break: break-word;
        }
      }
      
      .ai-message {
        flex-direction: row;
        
        .avatar {
          width: 36px;
          height: 36px;
          line-height: 36px;
          border-radius: 50%;
          background: #7e57c2;
          color: #fff;
          text-align: center;
          font-size: 14px;
          flex-shrink: 0;
          margin-right: 12px;
        }
        
        .bubble {
          max-width: 70%;
          background: #fff;
          border-radius: 4px 18px 18px 18px;
          border: 1px solid #eee;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          overflow: hidden;
          
          :deep(.md-editor-previewOnly) {
            background: transparent;
            border: none;
            margin: 0;
          }
          
          :deep(.md-editor-preview-wrapper) {
            padding: 10px;
          }
          
          .loading {
            text-align: center;
            padding: 10px;
          }
        }
      }
    }
  }
  
  .send-panel {
    border-top: 1px solid #e0e0e0;
    background: #fff;
    padding: 10px 15px;
    flex-shrink: 0;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
    
    .model-selector {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      
      .model-label {
        font-size: 14px;
        color: #666;
        margin-right: 8px;
      }
      
      :deep(.el-select) {
        width: 180px;
      }
    }
    
    .input-area {
      display: flex;
      align-items: flex-end;
      
      .el-input {
        flex: 1;
        margin-right: 10px;
      }
      
      :deep(.el-textarea__inner) {
        border-radius: 18px;
        padding: 8px 15px;
        resize: none;
        border: 1px solid #dcdfe6;
        box-shadow: none;
        background: #f9f9f9;
        min-height: 40px;
        
        &:focus {
          border-color: #2b5ff5;
          background: #fff;
        }
      }
      
      .send-btn {
        border-radius: 50%;
        padding: 10px;
        min-width: 40px;
        height: 40px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.no-data {
  text-align: center;
  color: #999;
  padding: 20px;
}
</style>
